<template>
  <div class="event-management">
    <a-card title="事件管理" :bordered="false">
      <template #extra>
        <GuideWrapper guide-type="event-management" title="事件管理使用指南" />
      </template>

      <a-tabs v-model:activeKey="activeTab" type="card">
        <!-- 事件定义管理 -->
        <a-tab-pane key="definitions" tab="事件定义">
          <EventDefinitionPanel
            :resource-id="resourceId"
            :resource-type="resourceType"
            @event-created="handleEventCreated"
            @event-updated="handleEventUpdated"
          />
        </a-tab-pane>

        <!-- 事件查询 -->
        <a-tab-pane key="query" tab="事件查询">
          <EventQueryPanel
            :resource-id="resourceId"
            :resource-type="resourceType"
            @event-selected="handleEventSelected"
          />
        </a-tab-pane>

        <!-- 事件订阅 -->
        <a-tab-pane key="subscriptions" tab="事件订阅">
          <EventSubscriptionPanel
            :resource-id="resourceId"
            :resource-type="resourceType"
            @subscription-created="handleSubscriptionCreated"
            @subscription-updated="handleSubscriptionUpdated"
          />
        </a-tab-pane>

        <!-- 事件触发器 -->
        <a-tab-pane key="triggers" tab="事件触发器">
          <EventTriggerPanel
            :resource-id="resourceId"
            :resource-type="resourceType"
            @trigger-created="handleTriggerCreated"
            @trigger-updated="handleTriggerUpdated"
          />
        </a-tab-pane>

        <!-- 事件模板 -->
        <a-tab-pane key="templates" tab="事件模板">
          <EventTemplatePanel
            :resource-id="resourceId"
            :resource-type="resourceType"
            @template-created="handleTemplateCreated"
            @template-updated="handleTemplateUpdated"
          />
        </a-tab-pane>

        <!-- 事件监控 -->
        <a-tab-pane key="monitoring" tab="事件监控">
          <EventMonitoringPanel
            :resource-id="resourceId"
            :resource-type="resourceType"
            @event-processed="handleEventProcessed"
          />
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { message } from 'ant-design-vue';
import EventDefinitionPanel from './EventDefinitionPanel.vue';
import EventQueryPanel from './EventQueryPanel.vue';
import EventSubscriptionPanel from './EventSubscriptionPanel.vue';
import EventTriggerPanel from './EventTriggerPanel.vue';
import EventTemplatePanel from './EventTemplatePanel.vue';
import EventMonitoringPanel from './EventMonitoringPanel.vue';
import GuideWrapper from '../../guides/GuideWrapper.vue';

// Props
interface Props {
  resourceId: string;
  resourceType: string;
}

const props = defineProps<Props>();

// 响应式数据
const activeTab = ref('definitions');

// 事件处理
const handleEventCreated = (event: any) => {
  message.success('事件定义创建成功');
  console.log('事件定义创建:', event);
};

const handleEventUpdated = (event: any) => {
  message.success('事件定义更新成功');
  console.log('事件定义更新:', event);
};

const handleEventSelected = (event: any) => {
  console.log('事件选择:', event);
};

const handleSubscriptionCreated = (subscription: any) => {
  message.success('事件订阅创建成功');
  console.log('事件订阅创建:', subscription);
};

const handleSubscriptionUpdated = (subscription: any) => {
  message.success('事件订阅更新成功');
  console.log('事件订阅更新:', subscription);
};

const handleTriggerCreated = (trigger: any) => {
  message.success('事件触发器创建成功');
  console.log('事件触发器创建:', trigger);
};

const handleTriggerUpdated = (trigger: any) => {
  message.success('事件触发器更新成功');
  console.log('事件触发器更新:', trigger);
};

const handleTemplateCreated = (template: any) => {
  message.success('事件模板创建成功');
  console.log('事件模板创建:', template);
};

const handleTemplateUpdated = (template: any) => {
  message.success('事件模板更新成功');
  console.log('事件模板更新:', template);
};

const handleEventProcessed = (result: any) => {
  message.success('事件处理完成');
  console.log('事件处理结果:', result);
};
</script>

<style lang="less" scoped>
.event-management {
  .ant-tabs-content {
    min-height: 400px;
  }
}
</style>
